<template>
	<view class="">
		<!-- 搜索 -->
		<view class="py-2 seach bg-white d-flex j-center a-center">
			<view class="px-3 d-flex py-1 rounded-50 span-18 bg-light-secondary">
				<u-icon   name="search" color="" size="28"></u-icon>
				<input class="ml-2 w-100" type="text" placeholder="搜索规格项目" v-model="keywords" @confirm="confirm_input" @input="key_input" />
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="h_100" v-else>
				<view class="h_100 d-flex a-center j-center flex-column" v-if="specification.length==0">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="font-26">暂无添加任何规格项目</view>
				</view>	
				<view class="m-2 bg-white rounded-20 o-hidden" v-else>
					<u-swipe-action :show="item.show" :index="index"
								v-for="(item,index) in specification" :key='index'  @open="open"
								:btn-width="btnWidth" @click="click" :options="options" >
								<view class="" @tap.stop="specTo(item)">
									<view class="ml-3">
										<view class="border-bottom a-center py-3 d-flex j-sb clazz">
											<view class="ellipsis-1 w-60">{{item.specification_name}}</view>
											<view class="mr-3 d-flex">
												<view class="present" v-if="item.specification_id==detail.specification_id">当前已选</view>
												<u-icon name="arrow-right" size="35" color="#999999"></u-icon>
											</view>
										</view>
									</view>
								</view>
					</u-swipe-action>
				</view>
			</view>
		</scroll-view>
		<!-- 删除 -->
		<u-modal v-model="dele_show" show-cancel-button @confirm="confirm_dele" mask-close-able>
			<view class="m-2 text-center">
				您确定要删除此规格吗？
			</view>
		</u-modal>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		
		<view class="footer">
		</view>
		<view class="bg-white release  py-2 w-100 position-fixed bottom-0">
			<button type="warn" :disabled="isDisable" @click="add_project">新增规格项目</button>
		</view>
		
		<u-modal v-model="back_show" show-cancel-button @confirm="confirm_back" mask-close-able>
			<view class="p-3">
				<view class="text-center">更换规格项目，会将之前已添加的相关数据清除，清除后不可恢复，请谨慎操作，您确定要切换吗？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				scrollHeight:0, // 自适应高度
				specification:"", // 商品规格列表
				goods_id:0, // 商品ID
				keywords:"", // 关键字
				dele_show:false, // 删除状态
				specification_id:0, // 规格ID
				u_loadmore:true, // 加载中
				detail:"", // 商品详情
				back_show:false,
				spec_id:0, // ID
				
				btnWidth: 130,
				show: false,
				options: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#ff9900',
							color:"#ffffff"
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f7313b',
							color:"#ffffff"
						}
					}
				],
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight -res[0].top -res[1].bottom+ 'px';
					})
				}
			})
		},
		watch:{
			keywords(val, oldVal){
				if(val==""){
					this.$H.post("v2/store/goods/specification").then(res=>{
						this.specification=res.data.map(v=>{
							return {
								...v,
								show:false,
							}
						})
					})
				}
				console.log(val, 'val')
				console.log(oldVal, 'oldVal')
			}
		},
		methods:{
			// 搜索进入
			key_input(e){
				this.keywords=e.detail.value
			},
			confirm_input(){
				let arr=this.specification.find(v=>{
					if(v.specification_name.includes(this.keywords)){
						return v
					}
				})	
				if(arr){
					this.specification=[arr]
				}else{
					this.specification=[]
				}
				console.log(arr)
			},
			// 添加新增规格
			add_project(){
				uni.navigateTo({
					url:'/pagesA/goods/spec-add-project'
				})
			},
			// 侧滑操作
			click(index, index1) {
				console.log(index, index1)
				let specification_id=this.specification.filter((v,i)=>{
					return index==i?v:""
				})
				this.specification_id=specification_id[0].specification_id
				if(index1 == 0) {
					this.specification[index].show = false;
					uni.navigateTo({
						url:'/pagesA/goods/spec-add-project?specification_id='+specification_id[0].specification_id
					})
				} else {
					this.specification[index].show = false;
					console.log(this.specification[index])
					this.dele_show=true
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.specification[index].show = true;
				this.specification.map((val, idx) => {
					if(index != idx) this.specification[idx].show = false;
				})
			},
			// 删除 
			confirm_dele(){
				this.$H.post("v2/store/goods/specification/delete",{
					specification_id:this.specification_id
				}).then(res=>{
					this.$H.post("v2/store/goods/specification").then(res=>{
						this.specification=res.data.map(v=>{
							return {
								...v,
								show:false,
							}
						})
						
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'default',
						})
					})
				})
			},
			// 规格项目
			specTo(item){
				this.spec_id=item.specification_id
				console.log(item.specification_id==this.detail.specification_id)
				if(item.specification_id==this.detail.specification_id||this.detail.specification_id==0){
					uni.navigateTo({
						url:`/pagesA/goods/spec?specification_id=${item.specification_id}&goods_id=${this.goods_id}`
					})
				}else{
					this.back_show=true
				}
			},
			confirm_back(){
				uni.navigateTo({
					url:`/pagesA/goods/spec?specification_id=${this.spec_id}&goods_id=${this.goods_id}`
				})
			},
		},
		onShow() {
			this.$H.post("v2/store/goods/specification").then(res=>{
				this.specification=res.data.map(v=>{
					return {
						...v,
						show:false,
					}
				})
			})
			
			this.$H.post("v2/store/goods/detail",{
				goods_id:this.goods_id
			}).then(res=>{
				console.log(res)
				this.detail=res.data
			})
		},
		onLoad(e) {
			this.$H.post("v2/store/goods/specification").then(res=>{
				this.specification=res.data.map(v=>{
					return {
						...v,
						show:false,
					}
				})
				this.u_loadmore=false
				console.log(this.specification)
			})
			this.goods_id=e.goods_id
			
			this.$H.post("v2/store/goods/detail",{
				goods_id:this.goods_id
			}).then(res=>{
				console.log(res)
				this.detail=res.data
			})
		}
	}
</script>

<style>
	.present{
		padding: 3upx 20upx;
		color: #FF0000;
		background-color: #fedee3;
		border-radius: 40upx;
	}
</style>
